<template>
    <div class="data-line">
        <div class="d-title">
            <h3>{{newData.title}}</h3>
        </div>
        <div class="datatop-list">
            <ul>
                <li v-for="(list,index) in newData.topList" :key="index">
                    <div class="d-item">
                        <p>{{list.name}}</p>
                        <em class="d-num f-20">{{list.num}}</em>
                        <div class="d-tags f-12">
                            <div class="d-btn" :class="{'red':(list.rate)*1 > 0}">
                                <i class="iconfont icon-jiantou-copy" v-if="(list.rate)*1 < 0"></i>
                                <i class="iconfont icon-jiantou" v-else></i>
                                <span>{{list.rate}}%</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="line-ebox">
            <div class="line-tt">
                <h3 class="f-12 f400">{{newData.sub}}</h3>
            </div>
            <div class="d-line" :id="id" :style="{ width: '100%', height: '230px' }"></div>
        </div>
        <div class="linedata-fenxi">
            <div class="fx-tt">
               <i class="iconfont icon-zhineng"></i>智能分析
            </div>
            <div class="text f-14">
                <p>{{newData.text}}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
   props:['id','linedata'],
  data() {
      return{
          newData:{},
        option :{
            tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
            },
            textStyle: {
              color: "#fff",
            },
          },
        //   formatter: "{b}<br>{a0}: {c0}个,{a1}: {c1}个<br>{a2}: {c2}个,{a3}: {c3}个"
        },
            legend: {
                icon: "rect",
                right: "0",
                bottom: 6,
                left:'center',
                itemWidth:8,
                itemHeight:3,
                align: "left",
                data: ['预测客流','入园客流'],
                textStyle: {
                    fontSize: 12,
                    color: "rgba(0,0,0,0.6)",
                },
            },

            xAxis: {
                type: 'category',
                axisLine:{
                    show:false,
                },
                axisLabel:{
                    margin:20,
                    textStyle: {
                        color: "rgba(0,0,0,0.6)",
                        fontSize: 12,
                      
                    },

                },
                axisTick:{
                    lineStyle:{
                        color:'rgba(24,24,24,0.1)'
                    }
                },
                data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00','17:00','18:00']
            },
            yAxis: {
                type: 'value',
                // show:false,
                axisTick:{
                    show:false,
                },
                axisLine:{
                    show:false,
                },
                axisLabel:{
                    show:false
                },
                splitNumber:3,
                splitLine:{
                    lineStyle:{
                        color:'rgba(24,24,24,0.1)'
                    }
                }
            },
            color:['#2BA471','#0661FB'],
            grid:{
                left:'0',
                right:'0',
                top:'5%',
                bottom:'30%'
            },
            series: [
                {
                    name:'',
                    data: [],
                    type: 'line',
                    showSymbol: false,
                    smooth: true
                },
                {
                    name:'',
                    data: [],
                    type: 'line',
                    showSymbol: false,
                    smooth: true
                }
            ]
        }
      }
  },
  watch:{
    linedata(nv,ov){
        if(nv){
            this.newData = nv;
            this.drawline();
        }
    }
  },
  mounted(){
      
  },
  methods:{
      drawline(){
        var that = this;
        var myChart = that.$echarts.init(document.getElementById(this.id));
        that.myChart = myChart;
        var sdata = []
        this.newData.Sdata.forEach((element,i) => {
            var obj = {
                name: this.newData.Ldata[i],
                data: element,
                type: 'line',
                showSymbol: false,
                smooth: true
            }
            sdata.push(obj)
        });
        that.option.series = sdata
        myChart.setOption(that.option);
        myChart.setOption({
            legend:{
                data:this.newData.Ldata
            },
            xAxis:{
                data:this.newData.Xdata
            }
        });

      }
  }
}
</script>
<style scoped lang="scss">
.d-title{
    margin-bottom: 16px;
}
.data-line{
    padding: 24px;
}
.d-tags{
    display: inline-block;
    .d-btn{
        display: flex;
        align-items: center;
        border-radius: 3px;
        background-color: #E3F9E9;
        padding:2px 7px 2px 3px;
        color: #2BA471;
        &.red{
            background-color:#FFF0ED;
            color: #D54941;
        }
    }
    
    
    .iconfont{
        font-size: 19px;
    }
}
.datatop-list{
    ul{
        display: flex;
        flex-wrap: wrap;
    }
    li{
        width: 20%;
    }
    p{
        font-size: 14px;
        color: rgba(0,0,0,0.6);
    }
    .d-num{
        display: block;
        margin: 8px 0 4px;
    }
}
.line-ebox{
    margin: 12px 0 0;
}
.text{
    color: #404040;
}
.fx-tt{
    color: #000000;
    font-weight: 600;
    margin-bottom: 8px;
    .iconfont{
        font-size: 18px;
        
        margin-right: 10px;
    }
}
.linedata-fenxi{
    background-color: #F8F9FA;
    border-radius: 9px;
    padding: 18px;
}
</style>